<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/resources/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/resources/font/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/resources/css/public.css" media="all">
    <style>
        .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
        .icon {margin-right:10px;color:#1aa094;}
        .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
        .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
        .main_btn > p {height:40px;}
    </style>
</head>

<body class="childrenBody">
<fieldset class="table-search-fieldset" style="padding: 12px; margin-bottom: 20px;">
    <div id="nowTime"></div>
</fieldset>

<div class="layui-panel">
    <div style="padding: 50px 30px;">一个面板</div>
</div>

<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
        <div class="layui-card-body">
            <div id="echarts-records" style="width: 100%;min-height:500px"></div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script src="/resources/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/resources/js/jquery-3.4.1.min.js" charset="utf-8"></script>

<script type="text/javascript">
    //得到当前的登陆人信息
    var currentUserName='[[${session.user.name}]]'

    //获取系统时间
    var newDate = '';
    getLangDate();
    //值小于10时，在前面补0
    function dateFilter(date){
        if(date < 10){return "0"+date;}
        return date;
    }
    function getLangDate(){
        var dateObj = new Date(); //表示当前系统时间的Date对象
        var year = dateObj.getFullYear(); //当前系统时间的完整年份值
        var month = dateObj.getMonth()+1; //当前系统时间的月份值
        var date = dateObj.getDate(); //当前系统时间的月份中的日
        var day = dateObj.getDay(); //当前系统时间中的星期值
        var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
        var week = weeks[day]; //根据星期值，从数组中获取对应的星期字符串
        var hour = dateObj.getHours(); //当前系统时间的小时值
        var minute = dateObj.getMinutes(); //当前系统时间的分钟值
        var second = dateObj.getSeconds(); //当前系统时间的秒钟值
        var timeValue = "" +((hour >= 12) ? (hour >= 18) ? "晚上" : "下午" : "上午" ); //当前时间属于上午、晚上还是下午
        newDate = dateFilter(year)+"年"+dateFilter(month)+"月"+dateFilter(date)+"日 "+" "+dateFilter(hour)+":"+dateFilter(minute)+":"+dateFilter(second);
        document.getElementById("nowTime").innerHTML = "亲爱的【"+currentUserName+"】，"+timeValue+"好！ 欢迎使用 学生请假管理系统。当前时间为： "+newDate+"　"+week;
        setTimeout("getLangDate()",1000);
    }

    layui.use(['form','element','layer','jquery'],function(){
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            element = layui.element;
        $ = layui.jquery;
        //上次登录时间【此处应该从接口获取，实际使用中请自行更换】
        $(".loginTime").html(newDate.split("日")[0]+"日</br>"+newDate.split("日")[1]);
        //icon动画
        $(".panel a").hover(function(){
            $(this).find(".layui-anim").addClass("layui-anim-scaleSpring");
        },function(){
            $(this).find(".layui-anim").removeClass("layui-anim-scaleSpring");
        })
        $(".panel a").click(function(){
            parent.addTab($(this));
        })
        //最新文章列表
        $.get("/resources/json/newsList.json",function(data){
            var hotNewsHtml = '';
            for(var i=0;i<5;i++){
                hotNewsHtml += '<tr>'
                    +'<td align="left"><a href="javascript:;"> '+data.data[i].newsName+'</a></td>'
                    +'<td>'+data.data[i].newsTime.substring(0,10)+'</td>'
                    +'</tr>';
            }
            $(".hot_news").html(hotNewsHtml);
            $(".userAll span").text(data.length);
        })
    })

    layui.use(['echarts'], function () {
        var $ = layui.jquery,
            echarts = layui.echarts;
        /**
         * 报表功能
         */
        $.ajax({
            "url": "/resources/json/data.json",
            "type": "GET",
            "success": function (data) {

                var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
                var optionRecords = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['访问量', '活跃用户', '文章浏览量', '文章发布数', '游玩用户数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        // boundaryGap: false,
                        data: data.day
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '访问量',
                            type: 'line',
                            data: data.yjyx
                        },
                        {
                            name: '活跃用户',
                            type: 'line',
                            data: data.lmgg
                        },
                        {
                            name: '文章浏览量',
                            type: 'line',
                            data: data.spgg
                        },
                        {
                            name: '文章发布数',
                            type: 'line',
                            data: data.zjfw
                        },
                        {
                            name: '游玩用户数',
                            type: 'line',
                            data: data.ssyq
                        }
                    ]
                };
                echartsRecords.setOption(optionRecords);

                // echarts 窗口缩放自适应
                window.onresize = function () {
                    echartsRecords.resize();
                }
            }
        });
    })

</script>
</body>
</html>
